<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入ElementUI样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
    <!-- 引入ElementUI组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
    <div id="app">
        <el-button :plain="true" @click="open1">news</el-button>
        <el-button :plain="true" @click="open2">success</el-button>
        <el-button :plain="true" @click="open3">warn</el-button>
        <el-button :plain="true" @click="open4">mistake</el-button>
        <script>
            new Vue({
                el:'#app',
                methods:{
                    open1() {
                        this.$message('This is a message prompt');
                    },
                    open2() {
                        this.$message({
                            message: 'Congratulations, this is a successful news',
                            type: 'success'
                        });
                    },
                    open3() {
                        this.$message({
                            message: 'Warning! This is a warning message.',
                            type: 'warning'
                        });
                    },
                    open4() {
                        this.$message.error('Wrong! This is an error message.');
                    }
                }
            });
        </script>
    </div>
</body>
</html>